<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="Restyling jQuery UI Widgets and Elements" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/bootstrap-paginator.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/ace-fonts.css" />
    <link rel="stylesheet" href="../css/ace.min.css" id="main-ace-style" />
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../css/ace-part2.min.css" />
    <![endif]-->
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../css/ace-ie.min.css" />
    <![endif]-->
    <script src="../js/ace-extra.min.js"></script>
    <!--[if lte IE 8]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .CSSearchTbl{ border:1px #008CD4 solid;}
        .CSSearchTbl thead{}
        .CSSearchTbl thead tr{}
        .CSSearchTbl thead tr th{  text-align:left; padding-left:10px;}
        .CSSearchTbl tbody{}
        .CSSearchTbl tbody tr{}
        .CSSearchTbl tbody tr td{  padding: 10px;}
        .CSSearchTbl tbody tr td.right{ text-align: left;}
        .CSSearchTbl tbody tr td.left{ text-align: right;}
        .table-responsive{ display: none;}
    </style>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function(){
            $.ajax({
                url:"http://121.40.216.49:50031/api/apply/getList",
                data:{
                    'page_num':1,
                    'page_size':10,
                    'apply_type':1,
                },
                type:'post',
                dataType:'json',
                success:function(data){
                    var html = "";
                    $.each(data.data.list,function(i,item){
                        html+="<tr>";
                        html+="<td>" +item.company_name + " </td>";
                        html+="<td>"+item.create_time+"</td>";
                        html+="<td class=\"hidden-480\">"+item.mobile+"</td>";
                        html+="<td>"+item.name+"</td>";
                        html+="<td class=\"hidden-480\">"+item.platform_id+"</td>";
                        html+="<td class=\"hidden-480\">" +item.remarks+"</td>";
                        html+="<td>\n" +
                            "<div class=\"hidden-sm hidden-xs btn-group\">\n" +
                            "<button class=\"btn btn-xs btn-info\">\n" +
                            "<i class=\"ace-icon fa fa-pencil bigger-120\"></i>\n" +
                            "</button>\n" +
                            "<button class=\"btn btn-xs btn-danger\">\n" +
                            "<i class=\"ace-icon fa fa-trash-o bigger-120\"></i>\n" +
                            "</button>\n" +
                            "</div>\n" +
                            "</td>";
                        html+="</tr>";
                    });
                    $("#resultList").html(html);
                    var allpage = data.data.totalRow;//总记录数
                    var pageNumber = data.data.pageNumber;//当前页
                    var totalPage = data.data.totalPage;//总页数
                    var options = {
                        bootstrapMajorVersion: 3, //版本
                        currentPage: pageNumber, //当前页数
                        totalPages: totalPage, //总页数
                        numberOfPages: 5,
                        shouldShowPage:true,//是否显示该按钮
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "首页";
                                    case "prev":
                                        return "上一页";
                                    case "next":
                                        return "下一页";
                                    case "last":
                                        return "末页";
                                    case "page":
                                        return page;
                                }
                            },

                    };

                },

        });
        });

    </script>


</head>

<body class="no-skin">
<div class="main-container" id="main-container">
    <div class="main-content">
        <div class="page-content">
            <!-- /section:settings.box -->
            <div class="page-content-area">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>公司</th>
                                        <th>创建时间</th>
                                        <th class="hidden-480">电话</th>
                                        <th>姓名</th>
                                        <th>platform_id</th>
                                        <th class="hidden-480">
                                            <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
                                            备注</th>
                                        <th class="hidden-480">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="resultList">

                                    </tbody>
                                </table>

                                <ul id="pagination">
                                </ul>

                            </div><!-- /.span -->
                        </div><!-- /.row -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/jquery.dataTables.bootstrap.js"></script>
<!-- ace scripts -->
<script src="../js/ace-elements.min.js"></script>
<script src="../js/ace.min.js"></script>
<script>
    var options = {
        bootstrapMajorVersion: 3,
        alignment:'center',
        currentPage:1,
        numberOfPages:5,
        totalPages: 10,
    };
    $(document).ready(function(){
        $("#pagination").bootstrapPaginator(options);
    });
</script>
</body>
</html>
